<template>
  <div class="my-report-dialog">
    <el-dialog :title="respData.name" :visible.sync="dialogVisble" :before-close="handleClose"
               :close-on-click-modal=false :fullscreen="true">
      <el-row :gutter="20" style="font-size: 16px">
        <el-col :span="6" style="display: flex">
          <div id="myChart" ref="Echarts" :style="{width: '300px', height: '150px', 'margin':'auto'}"></div>
        </el-col>
        <el-col :span="6"
                style="display:flex;justify-content: center; align-items:center;height: 130px;border-right: 1px solid #d8dbe1;border-left: 1px solid #d8dbe1">
          <div style="margin: auto">
            <p><span class="point success-point "></span>成功步骤：{{ respData.valueArray[0] }}</p>
            <p><span class="fail-point point"></span>失败步骤：{{ respData.valueArray[1] }}</p>
            <p><span class="skip-point point"></span>跳过步骤：{{ respData.valueArray[2] }}</p>
          </div>
        </el-col>
        <el-col :span="6"
                style="display:flex;justify-content: center; align-items:center;height: 130px;border-right: 1px solid #d8dbe1">
          <div style="margin: auto">
            <p v-if="respData.level">用例等级：P{{ respData.level }}</p>
            <p>开始时间：{{ respData.topTime }}</p>
            <p>结束时间：{{ respData.endTime }}</p>
            <p>执行耗时：{{ respData.runTime / 1000 }} 秒 </p>
          </div>
        </el-col>
        <el-col :span="6" style="display:flex;justify-content: center; align-items:center;height: 130px">
          <div style="margin: auto">
            <p>性能模式：{{ respData.isHandless === 1 ? "开启" : "关闭" }}</p>
            <p>出现异常截图：{{ respData.isShot === 1 ? "开启" : "关闭" }}</p>
            <p>结束关闭浏览器：{{ respData.isEndClose === 1 ? "开启" : "关闭" }}</p>
            <p>忽略异常并继续执行：{{ respData.isContinueRun === 1 ? "开启" : "关闭" }} </p>
          </div>
        </el-col>
      </el-row>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" :tab-position="tabPosition" type="card">
          <el-tab-pane :label="item" :name="item" v-for="(item,index) in groupNames">
            <el-table
              class="my-table"
              height="calc(100vh - 340px)"
              :data="currentGroup">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <el-form label-position="left" class="demo-table-expand" label-width="100px">
                    <el-form-item label="定位方式" v-if="scope.row.optElement.length >1">
                      <span>{{ scope.row.optElement[0] }}</span>
                    </el-form-item>
                    <el-form-item label="表达式" v-if="scope.row.optElement.length >1">
                      <span>{{ scope.row.optElement[1] }}</span>
                    </el-form-item>
                    <el-form-item label="步骤类型">
                      <span>{{ scope.row.optName }}</span>
                    </el-form-item>
                    <el-form-item label="操作数据" v-if="scope.row.optData.length >0">
                      <span v-if="scope.row.optData.length === 1">{{ scope.row.optData[0] }}</span>
                      <span v-if="scope.row.optData.length >1">{{ scope.row.optData[0] }} : {{
                          scope.row.optData[1]
                        }}</span>
                    </el-form-item>
                    <el-form-item label="开始时间">
                      <span>{{ scope.row.startTime }}</span>
                    </el-form-item>
                    <el-form-item label="结束时间">
                      <span>{{ scope.row.endTime }}</span>
                    </el-form-item>
                    <el-form-item label="屏幕截图" v-if="scope.row.imagePath && scope.row.optName === '屏幕截图'">
                      <viewer>
                        <img :src="scope.row.imagePath" alt=""
                             style="width: 150px;height: 150px;border: 1px sandybrown solid;margin-top:8px">
                      </viewer>
                    </el-form-item>
                    <el-form-item label="失败截图" v-if="scope.row.imagePath && scope.row.optName !== '屏幕截图'">
                      <viewer>
                        <img :src="scope.row.imagePath" alt=""
                             style="width: 150px;height: 150px;border: 1px sandybrown solid;margin-top:8px">
                      </viewer>
                    </el-form-item>
                    <el-form-item label="错误日志" v-if="scope.row.result !== undefined && scope.row.result !== 'success'">
                      <pre class="pre">{{ scope.row.result }}</pre>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column type="index" label="序号" width="100" :index="indexMethod">
              </el-table-column>
              <el-table-column label="创建方式" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.creationMode === 1">引用</span>
                  <span v-else>自建</span>
                </template>
              </el-table-column>
<!--              <el-table-column label="所属用例" width="200" prop="caseName">-->
<!--                <template slot-scope="scope">-->
<!--                  <span v-if="scope.row.caseName">{{ scope.row.caseName }}</span>-->
<!--                  <span v-else>{{ respData.name.split("：")[1] }}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column label="步骤名称" width="" prop="stepName">
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
              <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
              <el-table-column label="耗时(ms)" width="120" prop="time">
              </el-table-column>
              <el-table-column label="结果" width="150" prop="result">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          :type="scope.row.result === 'success' ? 'success' : scope.row.result === undefined ? 'info' : 'danger'">
                    {{
                      scope.row.result === 'success' ? '成功' : scope.row.result === undefined ? '跳过' : '失败'
                    }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "reportDialog",
  props: {
    dialogVisble: {
      type: Boolean,
      default: false
    },
    respData: {
      type: Object,
      default: {}
    },
    reportType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      tabPosition:"top",
      activeName: '全部步骤',
      groupSteps: [],
      groupNames: [],
      currentGroup:this.respData.steps
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine();
      this.groupCaseData()
    })
  },
  methods: {
    handleClick(tab, event) {
      if(tab._props.label === "全部步骤"){
        this.currentGroup = this.respData.steps
        this.activeName = "全部步骤"
      }else{
        this.activeName = tab._props.label
        this.currentGroup = this.groupSteps[tab._props.label]
      }
    },
    groupCaseData() {
      let steps = JSON.parse(JSON.stringify(this.respData.steps));
      let _set = new Set();
      _set.add("全部步骤");
      steps.forEach(item => {
        _set.add(item.caseName)
      });
      this.groupNames = [..._set];
      let map = {};
      [..._set].forEach((set) => {
        let arr = [];
        steps.forEach(item => {
          if(set === item.caseName){
            arr.push(item);
          }
        });
        if(set === "全部步骤"){
          map[set] = steps;
        }else{
          map[set] = arr;
        }
      })
      this.groupSteps = map;
    },
    handleClose() {
      this.$emit("closeDialog")
    },
    indexMethod(index) {
      return index + 1;
    },
    drawLine() {
      // 3.定义图标对象myChart，初始化echarts实例
      let myChart = echarts.init(this.$refs.Echarts)
      // 4.添加配置项
      let options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 0,
          data: ['成功', '失败', '跳过']
        },
        series: [
          {
            name: '运行结果',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.respData.chartList
          }
        ]
      };
      // 5.将配置给myChart
      myChart.setOption(options);
    }
  }
}
</script>

<style lang="scss" scoped>
.my-report-dialog {

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }

  .el-table::before {
    height: 0 !important;
  }

  .success-point {
    background-color: #67c23a;
  }

  .fail-point {
    background-color: #f56c6c;
  }

  .skip-point {
    background-color: grey;
  }

  .point {
    border-radius: 50%;
    height: 14px;
    width: 14px;
    min-width: 14px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
  }

  .pre {
    margin: 0;
    overflow-x: scroll;
  }
}

</style>
